import React from "react";
import { Swiper } from 'react-vant';
import "../styles/home.scss";
import { Card, Toast, Button, Avatar } from "antd-mobile";
import { useEffect,useState } from "react";
import CityMask from "../components/CityMask";
import { Tab_Nav } from "../utils/data";
import {useNavigate} from "react-router-dom"
export default function Home() {
  
  // 选择城市字段
  const [city,setCity]=useState('');
  const [show,setShow]=useState(true);
// 跳转城市
const navigate=useNavigate()
  useEffect(() => {
    const localCity=localStorage.getItem('city');
    if(!localCity){
      setCity('北京')
    }else{
      setCity(localCity)
    }
   
  }, []);

  // 点击城市选择城市
  const changeCity=(value)=>{
    localStorage.setItem('city',value);
    setCity(value)
    setShow(true)
  };

  return (
    <div className="home">
      <p className="top">宏烨找房</p>
      <div>
      <header>
        <p>
          <span onClick={()=>setShow(false)}>{city}</span>
          <span>
            <input type="text" placeholder="你想住哪里？" />
          </span>
        </p>
      </header>
      <main>
        {/* 轮播图 */}
        <div className="banner">
          <Swiper>
            <Swiper.Item>1</Swiper.Item>
            <Swiper.Item>2</Swiper.Item>
            <Swiper.Item>3</Swiper.Item>
            <Swiper.Item>4</Swiper.Item>
          </Swiper>
        </div>
        {/* 分类 */}
        <div className="tabNav">
          {Tab_Nav.map((v, i) => {
            return (
              <li key={i} onClick={()=>navigate(v.path)}>
                <img
                  src={
                    new URL(`../assets/img/${i + 1}.png`, import.meta.url).href
                  }
                  alt=""
                />
                <span>{v.title}</span>
              </li>
            );
          })}
        </div>

        <div className="house">
          <li>
            <h2>楼市资讯</h2>
            <span>更多&gt;</span>
          </li>
          <ol>
            <li>
              <span>TOP1</span>
              <span>心悦上形成正i还未付款给客人！</span>
            </li>
          </ol>
        </div>
        {/* 房 */}
        <div className="house">
          <li>
            <h2>热门楼盘</h2>
            <span>更多&gt;</span>
          </li>
          <ul>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
          </ul>
        </div>
        {/* 经纪人 */}
        <div className="house">
          <li>
            <h2>经纪人</h2>
            <span>更多&gt;</span>
          </li>
          <div>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
            <Card className="card">
              <dl>
                <dt>
                  {" "}
                  <Avatar src="" />
                </dt>
                <dd>
                  <p>八维高爽凯</p>
                  <p>八维</p>
                </dd>
                <dd>
                  <Button>咨询</Button>
                </dd>
              </dl>
            </Card>
          </div>
        </div>
        <div className="house">
          <li>
            <h2>热门楼盘</h2>
            <span>更多&gt;</span>
          </li>
          <ul>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
            <dl>
              <dt>
                <img
                  src={new URL(`../assets/img/1.png`, import.meta.url).href}
                  alt=""
                />
              </dt>
              <dd>
                <h3>石景山</h3>
                <p>1室0厅/25.44m²</p>
                <p>161万</p>
              </dd>
            </dl>
          </ul>
        </div>
      </main>
      </div>

      {/* 城市选择蒙层 */} 
        <CityMask changeCity={changeCity} show={show} />
    </div>
  );
}
